<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <!-- --delay的值：数据比遍历的索引值 * 2 -->
        <div class="card" style="--delay: 0;">
            <div class="body">
                <div class="img"><img src="./assets/cat.png" alt=""></div>
                <div class="info">
                    <h2>Submit Kepoor</h2>
                    <p>Frontend Developer</p>
                </div>
            </div>
            <a href="#" class="btn">点赞</a>
        </div>
        <div class="card" style="--delay: -2;">
            <div class="body">
                <div class="img"><img src="./assets/dog.png" alt=""></div>
                <div class="info">
                    <h2>Submit Doger</h2>
                    <p>Php Developer</p>
                </div>
            </div>
            <a href="#" class="btn">点赞</a>
        </div>

        <div class="card" style="--delay: -4;">
            <div class="body">
                <div class="img"><img src="./assets/leaf.png" alt=""></div>
                <div class="info">
                    <h2>Submit Leaf</h2>
                    <p>Frontend Developer</p>
                </div>
            </div>
            <a href="#" class="btn">点赞</a>
        </div>

        <div class="card" style="--delay: -6;">
            <div class="body">
                <div class="img"><img src="./assets/penguin.png" alt=""></div>
                <div class="info">
                    <h2>Submit Penguin</h2>
                    <p>Java Developer</p>
                </div>
            </div>
            <a href="#" class="btn">点赞</a>
        </div>

        <div class="card" style="--delay: -8;">
            <div class="body">
                <div class="img"><img src="./assets/rabbit.png" alt=""></div>
                <div class="info">
                    <h2>Submit Rabbit</h2>
                    <p>Firstend Developer</p>
                </div>
            </div>
            <a href="#" class="btn">点赞</a>
        </div>

        <div class="card" style="--delay: -10;">
            <div class="body">
                <div class="img"><img src="./assets/shibanul.png" alt=""></div>
                <div class="info">
                    <h2>Submit Shibanul</h2>
                    <p>Go Developer</p>
                </div>
            </div>
            <a href="#" class="btn">点赞</a>
        </div>
    </div>
</body>
</html>
